import React, { Component } from "react";
import { connect } from "dva";
import { Input, Button, Icon } from "antd";
import styles from "./Loghub.less";

@connect(stores => ({
  apidata: stores.adddataSource
}))
class Loghub extends Component {
  state = {
    endpoint: "",
    projectName: "",
    keyId: "",
    logstore: "",
    keySecre: "",
    consumerName: "",
    consumerGroup: "",
    AllControl: false,
    through: false
  };

  componentDidMount() {
    setTimeout(() => {
      const { dataDetail = [], operate = "add" } = this.props;
      if (operate === "mod" && dataDetail && dataDetail.dsType === 4) {
        this.setState(
          {
            endpoint: dataDetail.loghubEndpoint,
            projectName: dataDetail.loghubProjectName,
            keyId: dataDetail.loghubAccessKeyId,
            logstore: dataDetail.loghubLogStore,
            keySecre: dataDetail.loghubAccessKeySecret,
            consumerName: dataDetail.loghubConsumerName,
            consumerGroup: dataDetail.loghubConsumerGroup
          },
          () => {
            this.getUnsave();
          }
        );
      }
    }, 700);
  }

  epChange = e => {
    this.setState(
      {
        endpoint: e.target.value,
        AllControl: false,
        through: false
      },
      () => {
        this.getUnsave();
      }
    );
  };

  proChange = e => {
    this.setState(
      {
        projectName: e.target.value,
        AllControl: false,
        through: false
      },
      () => {
        this.getUnsave();
      }
    );
  };

  meChange = e => {
    this.setState(
      {
        keyId: e.target.value,
        AllControl: false,
        through: false
      },
      () => {
        this.getUnsave();
      }
    );
  };

  logChange = e => {
    this.setState(
      {
        logstore: e.target.value,
        AllControl: false,
        through: false
      },
      () => {
        this.getUnsave();
      }
    );
  };

  accChange = e => {
    this.setState(
      {
        keySecre: e.target.value,
        AllControl: false,
        through: false
      },
      () => {
        this.getUnsave();
      }
    );
  };

  CGchange = e => {
    this.setState(
      {
        consumerGroup: e.target.value,
        AllControl: false,
        through: false
      },
      () => {
        this.getUnsave();
      }
    );
  };

  CNchange = e => {
    this.setState(
      {
        consumerName: e.target.value,
        AllControl: false,
        through: false
      },
      () => {
        this.getUnsave();
      }
    );
  };

  getUnsave = () => {
    const { getValue } = this.props;
    const {
      projectName,
      endpoint,
      keyId,
      logstore,
      keySecre,
      consumerGroup,
      consumerName
    } = this.state;
    const temp = [
      {
        projectName,
        endpoint,
        keyId,
        logstore,
        keySecre,
        consumerGroup,
        consumerName
      }
    ];
    getValue(temp, this.state.AllControl, this.state.through);
  };

  test = () => {
    const {
      endpoint,
      projectName,
      keyId,
      logstore,
      keySecre,
      consumerGroup,
      consumerName
    } = this.state;
    const { dispatch } = this.props;
    if (
      endpoint !== "" &&
      projectName !== "" &&
      keyId !== "" &&
      logstore !== "" &&
      keySecre !== "" &&
      consumerGroup !== "" &&
      consumerName !== ""
    ) {
      dispatch({
        type: "adddataSource/testConnect",
        payload: {
          dsType: 4,
          loghubConsumerGroup: consumerGroup,
          loghubConsumerName: consumerName,
          loghubEndpoint: endpoint,
          loghubAccessKeyId: keyId,
          loghubAccessKeySecret: keySecre,
          loghubProjectName: projectName,
          loghubLogStore: logstore
        }
      }).then(() => {
        const { apidata } = this.props;
        const { testErr = false } = apidata;
        if (testErr) {
          this.setState(
            {
              AllControl: true,
              through: true
            },
            () => {
              const { getValue } = this.props;
              const temp = [
                {
                  projectName,
                  endpoint,
                  keyId,
                  logstore,
                  keySecre,
                  consumerGroup,
                  consumerName
                }
              ];
              getValue(temp, this.state.AllControl, this.state.through);
            }
          );
        } else {
          this.setState(
            {
              AllControl: true,
              through: false
            },
            () => {
              const { getValue } = this.props;
              const temp = [
                {
                  projectName,
                  endpoint,
                  keyId,
                  logstore,
                  keySecre,
                  consumerGroup,
                  consumerName
                }
              ];
              getValue(temp, this.state.AllControl, this.state.through);
            }
          );
        }
      });
    }
  };

  renderSuffix = () =>
    this.state.through ? (
      <Icon type="check-circle" style={{ color: "#52C41A" }} />
    ) : (
      <Icon type="close-circle" style={{ color: "#e23c39" }} />
    );

  render() {
    const { through, AllControl } = this.state;
    const { param, editable } = this.props;
    const {
      endpoint,
      projectName,
      keyId,
      logstore,
      keySecre,
      consumerGroup,
      consumerName
    } = this.state;
    return (
      <div className={styles.root}>
        <div className={styles.title}>数据配置</div>
        <div className={styles.info}>
          <div className={styles.choice1}>
            <span className={styles.star}>*</span>endpoint：
            <div style={{ display: "flex", flexDirection: "column" }}>
              <Input
                // style={{ width: 466 }}
                placeholder="请输入endpoint："
                onChange={this.epChange}
                className={styles.notEmpty}
                suffix={AllControl ? this.renderSuffix() : null}
                value={this.state.endpoint}
                disabled={!editable}
                // maxLength={25}
              />
            </div>
          </div>
          <div className={styles.choice5}>
            <span className={styles.star}>*</span>key_secre：
            <Input
              className={styles.notEmpty}
              placeholder="请输入key_secre"
              onChange={this.accChange}
              suffix={AllControl ? this.renderSuffix() : null}
              value={this.state.keySecre}
              disabled={!editable}
              // maxLength={25}
            />
          </div>
          <div className={styles.choice3}>
            <span className={styles.star}>*</span>key_id：
            <Input
              className={styles.notEmpty}
              placeholder="请输入key_id"
              onChange={this.meChange}
              suffix={AllControl ? this.renderSuffix() : null}
              value={this.state.keyId}
              disabled={!editable}
              // maxLength={25}
            />
          </div>
          <div className={styles.choice4}>
            <span className={styles.star}>*</span>log_store：
            <Input
              className={styles.notEmpty}
              placeholder="请输入log_store"
              onChange={this.logChange}
              suffix={AllControl ? this.renderSuffix() : null}
              value={this.state.logstore}
              disabled={!editable}
              // maxLength={25}
            />
          </div>
          <div className={styles.choice2}>
            <span className={styles.star}>*</span>project_name：
            <Input
              className={styles.notEmpty}
              placeholder="请输入project_name"
              onChange={this.proChange}
              suffix={AllControl ? this.renderSuffix() : null}
              value={this.state.projectName}
              disabled={!editable}
              // maxLength={25}
            />
          </div>
          <div className={styles.choice7}>
            <span className={styles.star}>*</span>consumer_group：
            <Input
              className={styles.notEmpty}
              placeholder="请输入consumer_group"
              onChange={this.CGchange}
              suffix={AllControl ? this.renderSuffix() : null}
              value={this.state.consumerGroup}
              disabled={!editable}
              // maxLength={25}
            />
          </div>
          <div className={styles.choice8}>
            <span className={styles.star}>*</span>consumer_name：
            <Input
              className={styles.notEmpty}
              placeholder="请输入consumer_name"
              onChange={this.CNchange}
              suffix={AllControl ? this.renderSuffix() : null}
              value={this.state.consumerName}
              disabled={!editable}
              // maxLength={25}
            />
          </div>
          <div
            style={{
              width: 466,
              marginLeft: 90,
              marginTop: 8,
              marginBottom: 24
            }}
          >
            <Button
              type="primary"
              onClick={this.test}
              style={{
                backgroundColor: through ? "#52C41A" : ""
              }}
              disabled={
                endpoint === "" ||
                projectName === "" ||
                keyId === "" ||
                logstore === "" ||
                keySecre === "" ||
                consumerGroup === "" ||
                consumerName === "" ||
                param[0] === "" ||
                param[1] === ""
              }
            >
              {through ? "测试通过" : "连通测试"}
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

export default Loghub;
